<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="../js/jquery.jscrollpane.js"></script>
<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
<script type="text/javascript">
$(document).ready(function() { 

function cancelAreaResizing() {
    var $txt = $('.cancel-textarea-bl textarea'),
    txtHeight = $txt.outerHeight(),
    $hiddenDiv = $('.cancel-hidden'),
    $pane = $('.cancel-textarea-scroll'),
    content = $txt.val(),
    api;
    content = content.replace(/\n/g, '<br />');
    $hiddenDiv.html(content + '<br/>');

    if (txtHeight != $hiddenDiv.outerHeight()) {
        $txt.height($hiddenDiv.outerHeight());
        if ($('.cancel-textarea').outerHeight() >= 140) {
            $pane.jScrollPane({enableKeyboardNavigation: false, showArrows: true, arrowSize: 5});
            api = $pane.data('jsp');
            $txt.blur();
            $txt.focus();
            api.scrollByY(0);
        }
        else {
            api = $pane.data('jsp');
            if (api) {
                api.destroy();
                $txt.blur();
                $txt.focus();
            }
        }
    }
    if (content) {
        $('.continue-cancel-subscription').removeClass('disabled');
		$('.cancel-subscription-txt').removeClass('hidden');
    } else {
	    $('.continue-cancel-subscription').addClass('disabled');
		$('.cancel-subscription-txt').addClass('hidden');
	}
}

$('.cancel-textarea-bl textarea').on('keyup', function() {
    cancelAreaResizing();
});

$('.continue-cancel-subscription').bind('click', function() {
    if(!$(this).hasClass('disabled')) {
        $('.cancel-subscription-st1').addClass('hidden');
        $('.cancel-subscription-st2').removeClass('hidden');
    }
});
  
});

</script>
</head>

<body id="bodyel" class="bottom-pages">


<div class="fm-dialog-overlay"></div>

<div class="fm-dialog cancel-subscription-st1">
	<div class="fm-dialog-close"></div>
    <div class="fm-dialog-header">
        <div class="fm-dialog-title">Subscription Cancellation</div>
    </div>
    <div class="fm-dialog-body">
        <div class="fm-dialog-top-text">
          Before we go ahead and terminate your subscription, we would love to know the reason why you want to cancel your plan.
        </div>
        <div class="reset-small-txt">Please enter the reason below:</div>
        <form>
           <div class="cancel-textarea-bl">
             <div class="cancel-textarea-scroll">
               <div class="cancel-textarea">
                 <textarea></textarea>
                 <div class="cancel-hidden"></div>
               </div>
             </div>
           </div>
        </form>
        <div class="cancel-subscription-txt hidden">
        	Click continue to cancel your subscription.
        </div>
        <div class="default-dialog-bottom">
            <div class="fm-dialog-button continue-cancel-subscription disabled"><span>Continue</span></div>
            <div class="fm-dialog-button cancel"><span>Back</span></div>
            <div class="clear"></div>
        </div>
    </div>
</div>

<div class="fm-dialog cancel-subscription-st2 hidden">
	<div class="fm-dialog-close"></div>
    <div class="fm-dialog-header">
        <div class="fm-dialog-title">Subscription Cancellation Successful</div>
    </div>
    <div class="fm-dialog-body">
        <div class="cancel-subscription-avatar color4">
           AD
        </div>
    	<div class="cancel-bott-txt">
        	Thank you for your feedback <span class="firstname">“firstname”</span> <span class="lastname">“lastname”</span>
        </div>
    </div>
</div>

</body>
</html>
